.video-box {
    height: 100%;
    width: 100%;
    position: relative;
    background: black;
    box-sizing: border-box;

    &.disabled {
        background: #eee url(../../../assets/images/logo.png) no-repeat center;
    }
    &.loading {
        background: rgb(46, 46, 46) url(../../../assets/images/loading.gif) no-repeat center;
    }

    .video-wrapper {
        background: #000;

        &.ATTACHING{
            .overlay {
                background: transparent url(../../../assets/images/loading.gif) no-repeat center;
                background-size: 30px ;
            }
        }

        &.SMALL {
            .overlay {
                .status-bar {
                    height: 10px;
                    line-height: 10px;
                    padding: 0 2px;
                }
            }
            
            .consuming-time, .name, .number{
                display: none! important;
            }
        }
    }
    
    .video-wrapper, video {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        &.active {
            box-shadow: 0px 0px 4px 2px rgba(255, 0, 0, 0.8);
            cursor: move;
        }

    }
    .drag-box {
        position: absolute;
        z-index: 10;
    }
    .overlay {
        .zoom-bar {
            width: 12px;
            height: 12px;
            background: url(../../../assets/images/icons/video_zoom_in.png) no-repeat center;
            margin: 8px;
            //cursor: move;
        }

        .status-bar {
            box-sizing: border-box;
            width: 100%;
            height: 20px;
            line-height: 20px;
            padding: 0 5px;
            background: rgba(0, 0, 0, 0.26);
            position: absolute;
            bottom: 0;
            left: 0;
            color: white;
            font-size: 12px;
            span {
                display: inline-block;
                vertical-align: middle;
            }
            .icon {
                width: 12px;
                height: 12px;
            }
            .voice {
                background: url(../../../assets/images/icons/video_voice.png) no-repeat center;
                &.active {
                    background: url(../../../assets/images/icons/video_voice_active.png) no-repeat center;
                }
            }
            
            .coin {
                background: url(../../../assets/images/icons/video_silver.png) no-repeat center;
                background-size: 100%;
            }

            .consuming-time {
                margin-right: 5px;
            }

            .number{
                padding-right: 4px;
            }
        }
    }

   

}